<template>
    <div class="bg">
        <nav-com title="注册" :showView='showView' @back="backHandler()"></nav-com>
        <div class="margin_box">
            <van-form>
                <van-row class="padd_box">
                    <van-col span="24">
                        <div class="login_box" style=" ">
                            <label>分享码：</label>
                            <input type="text" v-model='loginfrom.invitecode' :disabled='refDisabled' @blur="referralCodeHanlder(loginfrom.invitecode)"  placeholder="请输入推荐人分享码" />
                        </div>
                    </van-col>
                </van-row>
                <!-- <van-row class="padd_box">
                    <van-col span="24">
                        <div class="login_box" style=" ">
                            <label>手动设置：</label>
                            <input type="text" v-model='loginfrom.leaderMobile' @blur="referralCodeHanlder(loginfrom.leaderMobile)"  placeholder="请设置经理的手机号" />
                        </div>
                    </van-col>
                </van-row> -->
                <van-row class="padd_box">
                    <van-col span="24">
                        <div class="login_box" style=" ">
                            <label>账号：</label>
                            <input type="text" v-model='loginfrom.username' @blur="cellphoneCodeHanlder(loginfrom.username)" placeholder="请设置您的账号" />
                        </div>
                    </van-col>
                </van-row>
                <van-row class="padd_box">
                    <van-col span="24">
                        <div class="login_box" style=" ">
                            <label>密码：</label>
                            <input type="password" v-model='loginfrom.password' @blur="cellphoneCodeHanlder(loginfrom.password)" placeholder="请设置您的密码" />
                        </div>
                    </van-col>
                </van-row>
                <van-row class="padd_box">
                    <van-col span="24">
                        <div class="login_box" style=" ">
                            <label>确认密码：</label>
                            <input type="password" v-model='loginfrom.repassword' @blur="passwordHanlder(loginfrom.repassword)" placeholder="请再次输入您的密码" />
                        </div>
                    </van-col>
                </van-row>
                <van-row class="padd_box">
                    <van-col span="24">
                        <div class="login_box" style=" ">
                            <label>手机号：</label>
                            <input type="text" v-model='loginfrom.mobile' @blur="cellphoneCodeHanlder(loginfrom.mobile)" placeholder="请输入您的手机号" />
                        </div>
                    </van-col>
                </van-row>
                <van-row type="flex" justify="space-between" class="padd_box">
                    <van-col span='12'>
                        <div class="login_box">
                            <input type="text" style="width:26.66vw; margin-left:5vw;" v-model='loginfrom.code' @blur="verificationCodeCodeHanlder(loginfrom.code)" placeholder="请输入验证码" />
                        </div>
                    </van-col>
                    <van-col span='10' style="text-align:right;">
                        <div class="login_box" @click='codeHandler'  v-if="codeFalg" style="text-align:center; color:#FF491F;">{{codeText}}</div>
                        <div class="login_box" v-else style="text-align:center; color:#FF491F;">{{codeText}}</div>
                    </van-col>
                </van-row>
                <van-row>
                    <van-col style="text-align:center; font-size:4vw; color:red; margin-top:2.6vw;" span="24">
                        {{message}}
                    </van-col>
                </van-row>
                <van-row class="padd_box" style="margin-top:10.66vw;">
                    <van-col span="24">
                        <van-button style="font-size:4.8vw; height:13.33vw;" color="#FF491F" type="info" @click="onSubmit" round  block>注册</van-button>
                    </van-col>
                </van-row>
            </van-form>
        </div>
    </div>
</template>
<script>
import {postLogin,postVerificationcodes,register }  from '@/api/api'
import navCom from '@/component/nav'
export default {
    name:'register',
    components:{
        navCom
    },
    data() {
        return {
            message:'',
            showView:true,
            loginfrom:{
                username:'',
                password:'',
                invitecode:'',
                mobile:'',
                code:'',
                leaderMobile:''
            },
            disabled:false,
            codeText:'获取验证码',
            codeFalg:true,
            refDisabled:false,
        }
    },
    mounted(){
        this.init()
    },
    methods:{
        //初始化
        init(){
        },
        //返回
        backHandler(){
            this.$router.go(-1)
        },
        //判断分享码
        referralCodeHanlder(val){
            if(val =='' || val.trim().length==0){
                this.message = '分享码不能为空'
                return false
            }else {
                this.message = ''
                return true
            }
        },
        passwordHanlder(val){
            console.log(val);
            if(val =='' || val.trim().length==0){
                this.message = '确认密码不能为空'
                return false
            }else if(this.loginfrom.password!=val){
                this.message = '两次密码不一致'
                this.loginfrom.repassword="";
                return false;
            }
        },
        //判断手机号
        cellphoneCodeHanlder(val){
            let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            if(val =='' || val.trim().length==0){
                this.message = '手机号不能为空'
                return false
            }else if(!reg.test(val)){
                this.message = '手机号错误'
                return false
            }else {
                this.message = ''
                return true
            }
        },
        //判断验证码
        verificationCodeCodeHanlder(val){
            let reg = /^\d{4,6}$/
            if(val =='' || val.trim().length==0){
                this.message = '验证码不能为空'
                return false
            }else if(!reg.test(val)){
                this.message = '验证码不正确'
                return false
            }else {
                this.message = ''
                return true
            }
        },
        //保存
        onSubmit(){
            
            if(!this.referralCodeHanlder(this.loginfrom.code)){
                return false
            }else if(!this.cellphoneCodeHanlder(this.loginfrom.mobile)){
                return false
            }
            
            register(this.loginfrom).then(res=>{
                if(res.data.code == 1){
                    localStorage.removeItem("shareUser");
                    window.weixin.setItemToken(res.data.data.userinfo)
                    if(weixin.isAndroid()){
                        window.JS_TROOPS.dealLogin()
                    }
                    this.$router.push('/index')
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
        },
        //获取验证码
        codeHandler(){
            let that = this
            let telLen = this.loginfrom.mobile.length
            if(telLen==11){
                let time = null
                clearInterval(time)
                that.codeFalg = false
                let t = 60
                time = setInterval(function(){
                    t--
                    that.codeText = t
                    if(t<=0){
                        that.codeText = "获取验证码"
                        that.codeFalg = true
                        clearInterval(time)
                    }
                },1000)

                postVerificationcodes({mobile:this.loginfrom.mobile,event:"register"}).then(res=>{
                    if(res.code == 1){

                    }else{
                        this.$dialog.alert({
                            message:res.data.msg
                        })
                    }
                })
                return true
            }else{
                this.message = '请输入正确手机号'
                return false
            }
            
        },
    }
}
</script>
<style scoped>
.bg{background: #fff; height: 100vh;}
.margin_box {margin-left:10vw; margin-right:10vw; margin-top:11.2vw;}
.padd_box {min-height:10.66vw;  margin-top:3.4vw;  border-radius: 1.333vw;}
.ashBg {background: #fff; border-radius: 25px; border:1px solid #e3e3e3; width:100%;}
.login_box {border:1px solid #e3e3e3; font-size:4.2vw; border-radius: 6.66vw; height:13.3vw; line-height:13.3vw;}
.login_box label {padding-left:5.3vw; }
.login_box input { height:11vw; line-height: 11vw; width:50vw; border:none;}
</style>